<template>
  <div class="progress-tracking">
    <div class="page-header">
      <h2>进度跟踪</h2>
      <p>项目进度跟踪管理</p>
    </div>
    
    <el-card class="progress-card">
      <div class="toolbar">
        <span class="toolbar-label">切换项目</span>
        <el-select v-model="projectFilter" class="project-select" @change="recalc">
          <el-option :value="'all'" label="所有项目" />
          <el-option v-for="p in projects" :key="p.id" :value="p.id" :label="p.projectName" />
        </el-select>
      </div>

      <div class="content">
        <div class="module-list">
          <el-card v-for="item in flatModules" :key="item.key" class="module-item" shadow="never">
            <div class="module-title">
              <strong>{{ item.name }}</strong>
              <span class="module-sub">{{ item.projectName }} · {{ item.typeText }}</span>
            </div>
            <el-progress :percentage="item.progress" :stroke-width="16" status="success" />
          </el-card>
        </div>

        <div class="gantt-panel">
          <div class="gantt-header">
            <span>甘特图（简版）</span>
            <span class="range">时间范围：{{ dateRangeText }}</span>
          </div>
          <div class="gantt-body">
            <div class="gantt-row" v-for="item in flatModules" :key="item.key">
              <span class="row-label">{{ item.name }}</span>
              <div class="row-bar-wrap">
                <div class="row-bar" :style="barStyle(item)"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'
import { mockProjects, mockProjectModules } from '@/api/mockData'

// 项目筛选：'all' 或具体项目 id
const projects = ref([...mockProjects])
const projectFilter = ref('all')

// 扁平化模块数据，带项目信息
const flatModules = computed(() => {
  const selectedIds = projectFilter.value === 'all' ? projects.value.map(p => p.id) : [projectFilter.value]
  return mockProjectModules
    .filter(m => selectedIds.includes(m.projectId))
    .map(m => {
      const p = projects.value.find(x => x.id === m.projectId)
      return {
        key: `${m.projectId}-${m.id}`,
        name: m.moduleName,
        typeText: m.moduleType === 1 ? '前端' : '后端',
        projectName: p?.projectName || '未知项目',
        start: m.startDate,
        end: m.endDate,
        progress: Math.max(0, Math.min(100, p?.progress ?? 0))
      }
    })
})

// 甘特图时间范围（所有选中模块的最小开始-最大结束）
const minDate = computed(() => dayjs(Math.min(...flatModules.value.map(i => dayjs(i.start).valueOf()))))
const maxDate = computed(() => dayjs(Math.max(...flatModules.value.map(i => dayjs(i.end).valueOf()))))
const totalDays = computed(() => Math.max(1, maxDate.value.diff(minDate.value, 'day')))
const dateRangeText = computed(() => `${minDate.value.format('YYYY-MM-DD')} ~ ${maxDate.value.format('YYYY-MM-DD')}`)

// 根据模块起止生成条形宽度与偏移
const barStyle = (item) => {
  const startOffset = Math.max(0, dayjs(item.start).diff(minDate.value, 'day'))
  const endOffset = Math.max(0, dayjs(item.end).diff(minDate.value, 'day'))
  const left = (startOffset / totalDays.value) * 100
  const width = (Math.max(1, endOffset - startOffset) / totalDays.value) * 100
  return {
    left: `${left}%`,
    width: `${width}%`
  }
}

const recalc = () => {}
</script>

<style scoped>
.progress-tracking {
  padding: 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  color: #303133;
  margin-bottom: 8px;
}

.page-header p {
  color: #606266;
  font-size: 14px;
}

.progress-card {
  padding: 12px 12px 20px 12px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.toolbar-label {
  color: #606266;
}

.project-select { width: 260px; }

.content { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; width:}

.module-list { display: flex; flex-direction: column; gap: 12px; }
.module-item { border: 1px solid #e4e7ed; }
.module-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.module-sub { margin-left: 10px; color: #909399; font-size: 12px; }

.gantt-panel { border: 1px solid #e4e7ed; border-radius: 6px; padding: 12px; }
.gantt-header { display:flex; justify-content:space-between; margin-bottom:8px; }
.range { color:#909399; }
.gantt-body { display:flex; flex-direction:column; gap:10px; }
.gantt-row { display:flex; align-items:center; gap:12px; }
.row-label { width: 140px; color:#606266; }
.row-bar-wrap { position:relative; flex:1; height:16px; background:#f0f2f5; border-radius:8px; overflow:hidden; }
.row-bar { position:absolute; top:0; bottom:0; background:#4a90e2; }

@media (max-width: 960px) {
  .content { grid-template-columns: 1fr; }
}
</style>